
import { RouterLink } from 'vue-router';

<template>
    <div class="account-module">
      <div class="login" :style="{ background: 'url(' + bgImg + ') center  top', backgroundSize: '100% auto' }">
        <div class="logo">
          <img src="@/assets/bg3.png" class="bg2"/>
        </div>
        <div class="m">
          <img src="@/assets/bgword.png" class="bgword"/>
          <div class="content">
            <div class="title">大赛证书查询</div>
            <div class="item">
                <input placeholder="请输入姓名" v-model.trim="ruleForm.realName"/>
            </div>
            <div class="item">
                 <input placeholder="请输入身份证" v-model.trim="ruleForm.idCard"/>
            </div>

            <div class="item">
                 <input placeholder="请输入证书编号" v-model.trim="ruleForm.certificate"/>
            </div>
            <div class="btn btn-c" @click="login" :disabled="btnDisabled">立即查询</div>
            <div class="url" style="display: flex;justify-content: space-between;">
              <router-link class="one" target="_blank" tag="a" to="/" style="color: #00A0E9;">登录页面</router-link>
              <!-- 暂时拿掉注册-->
              <router-link class="one" tag="a" to="/account/user">立即注册</router-link>

            </div>
            <div style="margin-top: 15px;color: #959CA9;font-size: 18px; text-align: center;">
              大赛证书不作为中小学生招生入学依据
            </div>
         </div>

        </div>
      </div>
    </div>
</template>
<script lang="ts"  setup>
import { useRoute, useRouter } from "vue-router";
import {reactive, ref} from "vue";
import {ElMessage, FormInstance} from "element-plus";
import baseService from "@/service/baseService";
import {setCache} from "@/utils/cache";
const bgImg = require('../../assets/bg.png')

const router = useRouter();

const ruleForm = reactive({
  realName: "",
  idCard: "",
  certificate: ""
});

const btnDisabled = ref(false);



/**
 * 登录
 */
const login = async (formEl: FormInstance | undefined) => {
  btnDisabled.value = true;
  // 姓名、身份证、证书编号至少选择2项才能查询
  let count = 0;
  if (ruleForm.realName) {
    count++;
  }
  if (ruleForm.idCard) {
    count++;
  }
  if (ruleForm.certificate) {
    count++;
  }
  if(count < 2) {
    ElMessage.error("姓名、身份证、证书编号至少选择2项才能查询");
    return;
  }
  baseService
      .post("/front/spuser/queryCertificateBy", ruleForm)
      .then((res) => {
            if (res.code === 0) {
              console.log(res.data)
              if(res.data.length === 0) {
                ElMessage.error("未查询到相关证书");
                return;
              }
              const certificate = {
                realName: ruleForm.realName,
                idCard: ruleForm.idCard,
                certificate: ruleForm.certificate
              };
              setCache("certificate", certificate, true);
              if(res.msg === '2'){
                router.push("/certificateTeacher");
              }else{
                router.push("/certificateStudent");
              }
            } else {
              ElMessage.error(res.msg);
            }
            btnDisabled.value = false;
          }
      );
};


const isMobile = () => {
  const userAgent = navigator.userAgent;
  const mobileKeywords = [
    'Android',
    'iPhone',
    'iPad',
    'Windows Phone',
    'BlackBerry',
    'Opera Mini',
    'Symbian',
    'Kindle',
    'Mobile'
  ];
  const regex = new RegExp(mobileKeywords.join('|'), 'i');
  if(regex.test(userAgent)){
    router.push('/wap/certificate')
  }
}
isMobile();

</script>
<style lang="scss" scoped>
@import 'account.scss';
</style>
